<template>
  <div class="bg">
    <div class="close">
      <slot name="close"></slot>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
    <div class="main">
    </div>
    <div class="title">
      <div class="math_title1">
        <slot name="math_title1"></slot>
      </div>
      <div class="math_title2">
        <slot name="math_title2"></slot>
      </div>
      <div class="math_title3">
        <slot name="math_title3"></slot>
      </div>
      <div class="math_title4">
        <slot name="math_title4"></slot>
      </div>
      <div class="math_title5">
        <slot name="math_title5"></slot>
      </div>
      <div class="math_title6">
        <slot name="math_title6"></slot>
      </div>
    </div>

    <div class="content1" v-on:click="hide1_show">
    </div>
    <div class="hide1" v-show="hide1" v-on:click="hide1_hide">
      <div class="title_content1">

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0001.png">
          </div>
          <div class="title-item">
            <slot name="title1_1"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0013.png">
          </div>
          <div class="title-item">
            <slot name="title1_2"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title1_3"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title1_4"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0016.png">
          </div>
          <div class="title-item">
            <slot name="title1_5"></slot>
          </div>
        </div>

      </div>
    </div>

    <div class="content2" v-on:click="hide2_show">
    </div>
    <div class="hide2" v-show="hide2" v-on:click="hide2_hide">
      <div class="title_content2">

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0001.png">
          </div>
          <div class="title-item">
            <slot name="title2_1"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0014.png">
          </div>
          <div class="title-item">
            <slot name="title2_2"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title2_3"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title2_4"></slot>
          </div>
        </div>

      </div>
    </div>

    <div class="content3" v-on:click="hide3_show"> 
    </div>
    <div class="hide3" v-show="hide3" v-on:click="hide3_hide">
      <div class="title_content1">

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0001.png">
          </div>
          <div class="title-item">
            <slot name="title3_1"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0013.png">
          </div>
          <div class="title-item">
            <slot name="title3_2"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title3_3"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title3_4"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0016.png">
          </div>
          <div class="title-item">
            <slot name="title3_5"></slot>
          </div>
        </div>

      </div>
    </div>

    <div class="content4" v-on:click="hide4_show">
    </div>
    <div class="hide4" v-show="hide4" v-on:click="hide4_hide">
      <div class="title_content2">

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0001.png">
          </div>
          <div class="title-item">
            <slot name="title4_1"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0014.png">
          </div>
          <div class="title-item">
            <slot name="title4_2"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title4_3"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title4_4"></slot>
          </div>
        </div>

      </div>
    </div>

    <div class="content5" v-on:click="hide5_show">
    </div>
    <div class="hide5" v-show="hide5" v-on:click="hide5_hide">
      <div class="title_content1">

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0001.png">
          </div>
          <div class="title-item">
            <slot name="title5_1"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0013.png">
          </div>
          <div class="title-item">
            <slot name="title5_2"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title5_3"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title5_4"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0016.png">
          </div>
          <div class="title-item">
            <slot name="title5_5"></slot>
          </div>
        </div>

      </div>
    </div>

    <div class="content6" v-on:click="hide6_show">
    </div>
    <div class="hide6" v-show="hide6" v-on:click="hide6_hide">
      <div class="title_content2">

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0001.png">
          </div>
          <div class="title-item">
            <slot name="title6_1"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0014.png">
          </div>
          <div class="title-item">
            <slot name="title6_2"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title6_3"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title6_4"></slot>
          </div>
        </div>

      </div>
    </div>

    <div class="content7" v-on:click="hide7_show">
    </div>
    <div class="hide7" v-show="hide7" v-on:click="hide7_hide">
      <div class="title_content7">

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0001.png">
          </div>
          <div class="title-item">
            <slot name="title7_1"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0013.png">
          </div>
          <div class="title-item">
            <slot name="title7_2"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title7_3"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title7_4"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0016.png">
          </div>
          <div class="title-item">
            <slot name="title7_5"></slot>
          </div>
        </div>

      </div>
    </div>

    <div class="content8" v-on:click="hide8_show">
    </div>
    <div class="hide8" v-show="hide8" v-on:click="hide8_hide">
      <div class="title_content2">

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0001.png">
          </div>
          <div class="title-item">
            <slot name="title8_1"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0014.png">
          </div>
          <div class="title-item">
            <slot name="title8_2"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title8_3"></slot>
          </div>
        </div>

        <div class="title_small">
          <div class="img">
            <img class="img-item" src="../../../assets/icon/h0015.png">
          </div>
          <div class="title-item">
            <slot name="title8_4"></slot>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      hide1: false,
      hide2: false,
      hide3: false,
      hide4: false,
      hide5: false,
      hide6: false,
      hide7: false,
      hide8: false
    }
  },
  mounted () {
    var links = document.querySelectorAll('a')
    Array.prototype.forEach.call(links, function (links) {
      links.addEventListener('click', function (evt) {
        evt.preventDefault()
        console.log(this)
        console.log(this.href)
        if (this.href.slice(0, 16) === 'http://127.0.0.1') {
          console.log(this.href)
          const BrowserWindow = require('electron').remote.BrowserWindow
          BrowserWindow.showDevTools = false
          let win = new BrowserWindow({
            width: 1280,
            height: 720,
            webPreferences: {
              nodeIntegration: false
            },
            show: false,
            backgroundColor: '#2e2c29'
          })
          win.setFullScreen(true)
          win.loadURL(this.href)
          win.once('ready-to-show', () => {
            win.show()
          })
        } else {
          console.log('======')
          window.location.href = this.href
        }
      })
    })
  },
  methods: {
    hide1_show: function () {
      this.hide1 = true
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    },
    hide2_show: function () {
      this.hide1 = false
      this.hide2 = true
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    },
    hide3_show: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = true
      this.hide4 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    },
    hide4_show: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = true
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    },
    hide5_show: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = true
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    },
    hide6_show: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide6 = true
      this.hide7 = false
      this.hide8 = false
    },
    hide7_show: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = true
      this.hide8 = false
    },
    hide8_show: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = true
    },
    hide1_hide: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    },
    hide2_hide: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    },
    hide3_hide: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    },
    hide4_hide: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    },
    hide5_hide: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    },
    hide6_hide: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    },
    hide7_hide: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    },
    hide8_hide: function () {
      this.hide1 = false
      this.hide2 = false
      this.hide3 = false
      this.hide4 = false
      this.hide5 = false
      this.hide5 = false
      this.hide6 = false
      this.hide7 = false
      this.hide8 = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg{
  background:url(../../../assets/math/1.0/3-assets/mathbackg.jpg);
  background-size:100%;
  height:720px;
  width:1280px;
  position: relative;
  margin:0 auto;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.btn_go{
  height:100%;
  width:100%;
  opacity: 0;
  cursor:pointer;
}
a{
  height:100%;
  width:100%;
  color:black;
  text-decoration: none;
}
.content{
  background:url(../../../assets/math/1.0/3-assets/content.png) no-repeat;
  background-size:100%;
  position: absolute;
  width:90px;
  height:40px;
  top:30px;
  left:35px;
  cursor:pointer;
}
.close{
  background:url(../../../assets/math/1.0/3-assets/close.png) no-repeat;
  background-size:100%;
  position: absolute;
  width:50px;
  height:50px;
  right:35px;
  top:30px;
}
.main{
  background:url(../../../assets/math/1.0/2-assets/shuxue_beach.png) no-repeat;
  background-size:100%;
  position: absolute;
  width:1280px;
  height:225px;
  bottom:0px;
}
.title{
  background:url(../../../assets/math/1.0/2-assets/shuxue_title.png) no-repeat;
  background-size:100%;
  position: absolute;
  width:360px;
  height:130px;
  left:450px;
  top:30px;
}
.math_title1,.math_title2,.math_title3,.math_title4,.math_title5,.math_title6{
  position: absolute;
  width:40px;
  height:40px;
  font-size: 35px;
  font-weight: 800;
}
.math_title1{
  left:50px;
  top:70px;
  transform: rotate(-7deg); 
}
.math_title2{
  left:95px;
  top:65px;
  transform: rotate(-5deg); 
}
.math_title3{
  left:138px;
  top:60px;
  transform: rotate(-5deg); 
}
.math_title4{
  left:185px;
  top:60px;
  transform: rotate(5deg); 
}
.math_title5{
  left:230px;
  top:65px;
  transform: rotate(6deg); 
}
.math_title6{
  left:275px;
  top:72px;
  transform: rotate(7deg); 
}
.content1{
  background:url(../../../assets/math/1.0/3-assets/1.png) no-repeat;
  background-size:100%;
  width:155px;
  height:155px;
  position: absolute;
  left:100px;
  top:150px;
}
.hide1{
  background:url(../../../assets/math/1.0/3-assets/math_1_d.png) no-repeat;
  background-size:100%;
  width:250px;
  height:340px;
  left:95px;
  top:150px;
  position: absolute;
  z-index: 10;
}
.content2{
  background:url(../../../assets/math/1.0/3-assets/2.png) no-repeat;
  background-size:100%;
  width:160px;
  height:160px;
  position: absolute;
  left:200px;
  top:330px;
}
.hide2{
  background:url(../../../assets/math/1.0/3-assets/math_2_d.png) no-repeat;
  height:310px;
  width:250px;
  left:197px;
  top:180px;
  background-size:100%;
  position: absolute;
  z-index: 10;
}
.content3{
  background:url(../../../assets/math/1.0/3-assets/3.png) no-repeat;
  background-size:100%;
  width:160px;
  height:160px;
  position: absolute;
  left:440px;
  top:170px;
}
.hide3{
  background:url(../../../assets/math/1.0/3-assets/math_3_d.png) no-repeat;
  height:328px;
  width:250px;
  left:433px;
  top:170px;
  background-size:100%;
  position: absolute;
  z-index: 10;
}
.content4{
  background:url(../../../assets/math/1.0/3-assets/4.png) no-repeat;
  background-size:100%;
  width:160px;
  height:160px;
  position: absolute;
  left:550px;
  top:420px;
}
.hide4{
  background:url(../../../assets/math/1.0/3-assets/math_4_d.png) no-repeat;
  height:305px;
  width:250px;
  left:459px;
  top:267px;
  background-size:100%;
  position: absolute;
  z-index: 10;
}
.content5{
  background:url(../../../assets/math/1.0/3-assets/5.png) no-repeat;
  background-size:100%;
  width:160px;
  height:160px;
  position: absolute;
  right:380px;
  top:210px;
}
.hide5{
  background:url(../../../assets/math/1.0/3-assets/math_5_d.png) no-repeat;
  height:333px;
  width:250px;
  right:298px;
  top:210px;
  background-size:100%;
  position: absolute;
  z-index: 10;
}
.content6{
  background:url(../../../assets/math/1.0/3-assets/6.png) no-repeat;
  background-size:100%;
  width:160px;
  height:160px;
  position: absolute;
  right:280px;
  top:480px;
}
.hide6{
  background:url(../../../assets/math/1.0/3-assets/math_6_d.png) no-repeat;
  height:300px;
  width:250px;
  right:270px;
  top:321px;
  background-size:100%;
  position: absolute;
  z-index: 10;
}
.content7{
  background:url(../../../assets/math/1.0/3-assets/7.png) no-repeat;
  background-size:100%;
  width:160px;
  height:160px;
  position: absolute;
  right:100px;
  top:170px;
}
.hide7{
  background:url(../../../assets/math/1.0/3-assets/math_7_d.png) no-repeat;
  height:355px;
  width:250px;
  right:26px;
  top:169px;
  background-size:100%;
  position: absolute;
  z-index: 10;
}
.content8{
  background:url(../../../assets/math/1.0/3-assets/8.png) no-repeat;
  background-size:100%;
  width:160px;
  height:160px;
  position: absolute;
  right:100px;
  top:400px;
}
.hide8{
  background:url(../../../assets/math/1.0/3-assets/math_8_d.png) no-repeat;
  height:305px;
  width:250px;
  right:20px;
  top:250px;
  background-size:100%;
  position: absolute;
  z-index: 10;
}
.title_content1{
  width:180px;
  height:150px;
  position: absolute;
  left:35px;
  top:130px;
}
.title_content2{
  width:185px;
  height:120px;
  position: absolute;
  left:30px;
  top:45px;
}
.title_content7{
  width:180px;
  height:150px;
  position: absolute;
  left:35px;
  top:150px;
}
.title_small{
  width:200px;
  height:25px;
  margin-top: 1px;
}
.img-item{
  width:100%;
  height:100%;
}
.img{
  width:25px;
  height:25px;
  float: left;
}
.title-item{
  height:25px;
  width:170px;
  float:right;
  font-size: 20px;
}
</style>
